<template>
  <div class="login-container" :class="{ dark: isDark }">
    <!-- 左侧背景区域 -->
    <div class="login-background">
      <div class="background-wrapper">
        <!-- 添加简单的装饰图形 -->
        <div class="animated-background">
          <div class="gradient-circle"></div>
          <div class="geometric-shapes">
            <div class="shape" v-for="n in 5" :key="n"></div>
          </div>
        </div>

        <!-- Logo和标题区域 -->
        <div class="brand-content">
          <div class="logo-wrapper">
            <Logo :size="80" class="floating-logo" :color="logoColor" />
          </div>
          <h1 class="brand-title">{{ settings.title }}</h1>
          <p class="brand-description">
            帮助推广人员实现互帮互助实现共赢
          </p>
        </div>
      </div>
    </div>

    <!-- 右侧登录表单区域 -->
    <div class="login-form">
      <div class="form-wrapper">
        <!-- 主题切换按钮 -->
        <div class="theme-switch">
          <el-button class="theme-button" circle @click="toggleTheme">
            <el-icon><component :is="isDark ? 'Sunny' : 'Moon'" /></el-icon>
          </el-button>
        </div>

        <h2 class="welcome-text">欢迎回来</h2>
        <p class="login-tip">请使用您的账号密码登录系统</p>

        <!-- 登录方式切换 -->
        <div class="login-tabs">
          <div
            class="tab-item"
            :class="{ active: loginType === 'login' }"
            @click="loginType = 'login'"
          >
            <el-icon><User /></el-icon>
            账号登录
          </div>
          <div
            class="tab-item"
            :class="{ active: loginType === 'register' }"
            @click="loginType = 'register'"
          >
            <el-icon><Plus as UserPlus /></el-icon>
            注册账号
          </div>
        </div>

        <!-- 登录表单内容 -->
        <transition name="fade-transform" mode="out-in">
          <el-form
            v-if="loginType === 'login'"
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginRules"
            @keyup.enter="handleLogin"
          >
            <el-form-item prop="email">
              <el-input
                v-model="loginForm.email"
                placeholder="请输入邮箱"
                prefix-icon="Message"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                prefix-icon="Lock"
                show-password
              />
            </el-form-item>

            <div class="login-options">
              <el-checkbox v-model="rememberMe">记住我</el-checkbox>
              <a href="#" class="forget-password">忘记密码？</a>
            </div>

            <el-button
              :loading="loading"
              type="primary"
              class="login-button"
              @click="handleLogin"
            >
              {{ loading ? "登录中..." : "登录" }}
            </el-button>
          </el-form>

          <!-- 注册表单 -->
          <el-form
            v-else-if="loginType === 'register'"
            ref="registerFormRef"
            :model="registerForm"
            :rules="registerRules"
            @keyup.enter="handleRegister"
          >
            <el-form-item prop="email">
              <el-input
                v-model="registerForm.email"
                placeholder="请输入账号(邮箱必填)"
                prefix-icon="Message"
              />
            </el-form-item>
            <el-form-item prop="verifyCode">
              <div class="verify-code-container">
                <el-input
                  v-model="registerForm.verifyCode"
                  placeholder="请输入验证码"
                  prefix-icon="Key"
                />
                <el-button 
                  type="primary" 
                  :disabled="isSendingCode || countdown > 0"
                  @click="handleSendVerifyCode"
                >
                  {{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
                </el-button>
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="registerForm.password"
                type="password"
                placeholder="请输入密码(6-20个字符)"
                prefix-icon="Lock"
                show-password
              />
            </el-form-item> 
            
            <el-form-item prop="confirmPassword">
              <el-input
                v-model="registerForm.confirmPassword"
                type="password"
                placeholder="请确认密码"
                prefix-icon="Lock"
                show-password
              />
            </el-form-item>
            <el-form-item prop="nickname">
              <el-input
                v-model="registerForm.nickname"
                placeholder="请输入昵称(选填)"
                prefix-icon="User"
              />
            </el-form-item>
            <el-form-item prop="mobile">
              <el-input
                v-model="registerForm.mobile"
                placeholder="请输入手机号(选填)"
                prefix-icon="Iphone"
              />
            </el-form-item>

            <el-form-item prop="invitedBy">
              <el-input
                v-model="registerForm.invitedBy"
                placeholder="请输入邀请码(选填)"
                prefix-icon="User"
              />
            </el-form-item>

            <!-- 社交媒体选择 -->
            <div class="social-media-section">
              <h4>社交媒体账号(勾选至少一项)</h4>
              <div class="social-media-grid">
                <div class="social-media-item" v-for="item in registerForm.socialMediaList" :key="item.platformType">
                  <el-checkbox v-model="item.selected" @change="handleSocialMediaChange(item)" />
                  <span class="platform-label">{{ getPlatformName(item.platformType) }}</span>
                  <el-input
                    v-if="item.selected"
                    v-model="item.homeUrl"
                    placeholder="请输入社交媒体主页URL"
                    prop="socialMediaList.homeUrl"
                  />
                </div>
              </div>
            </div>

            <el-button
              :loading="registerLoading"
              type="primary"
              class="login-button"
              @click="handleRegister"
            >
              {{ registerLoading ? "注册中..." : "注册" }}
            </el-button>
          </el-form>
        </transition>

        <!-- 滑块验证 -->
        <el-dialog
          title="请拖动滑块完成拼图"
          width="360px"
          v-model="showSliderVerify"
          :close-on-click-modal="false"
          @closed="refresh"
          append-to-body
        >
          <slider-verify
            ref="sliderVerifyRef"
            @success="onSuccess"
            @fail="onFail"
            @again="onAgain"
          />
        </el-dialog>

        <!-- 页脚版权信息 -->
        <!-- <footer class="footer">
          <p>Copyright © 2024 Neat-Admin</p>
          <a href="https://beian.miit.gov.cn/" target="_blank"
            >湘ICP备2022002110号-1</a
          >
        </footer> -->
      </div>

      <!-- 社交登录 -->
      <!-- <div class="social-login">
        <div class="divider">其他登录方式</div>
        <div class="social-icons">
          <div class="social-icon" @click="handleSocialLogin('wechat')">
            <svg-icon name="wechat" />
          </div>
          <div class="social-icon" @click="handleSocialLogin('qq')">
            <svg-icon name="qq" />
          </div>
          <div class="social-icon" @click="handleSocialLogin('gitee')">
            <svg-icon name="gitee" />
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted, onUnmounted } from 'vue'
import router from "@/router";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/store/modules/user";
import { useSettingsStore } from "@/store/modules/settings";
import Logo from "@/layouts/components/Sidebar/Logo.vue";
import settings from "@/config/settings";
import SliderVerify from "./components/SliderVerify.vue";
import { getCaptchaSwitchApi, registerApi, sendVerifyCodeApi, RegisterParams} from "@/api/system/auth";
import { getDictDataByDictTypeApi } from '@/api/system/dict';
import { User, Plus as UserPlus, Lock, Iphone, Message } from '@element-plus/icons-vue'
import type { FormItemRule } from 'element-plus'

// 临时注释，用于刷新Linter
const userStore = useUserStore();
const settingsStore = useSettingsStore();
const loginFormRef = ref<FormInstance>();
const registerFormRef = ref<FormInstance>();
const loading = ref(false);
const registerLoading = ref(false);
const rememberMe = ref(false);
const loginType = ref("login");
const qrCodeUrl = ref("https://img.shiyit.com/qrcode.jpg");
const qrCodeExpired = ref(false);

const showSliderVerify = ref(false);
const sliderVerifyRef = ref();

// 数据字典选项
const platformTypeOptions = ref<any[]>([]);

const loginForm = reactive({
  email: "yuzhuo927@outlook.com",
  password: "123456",
  rememberMe: true,
  source: "",
  nonceStr: "",
  value: "",
});

const registerForm = reactive({
  email: "",          // 邮箱（作为用户名）
  password: "",        // 密码
  confirmPassword: "", // 确认密码
  nickname: "",        // 昵称（选填）
  mobile: "",         // 手机号（选填）
  verifyCode: "",     // 验证码
  socialMediaList: [] as Array<{
    platformType: string;
    homeUrl: string;
    selected: boolean;
  }>,
  captchaCode: "",    // 验证码
  captchaKey: "",      // 验证码key
  invitedBy: ""        // 邀请码
});

// 获取数据字典
const getDictData = async () => {
  try {
    const { data } = await getDictDataByDictTypeApi(['platform_type']);
    platformTypeOptions.value = data.platform_type?.list || [];
    
    // 初始化社交媒体列表
    registerForm.socialMediaList = platformTypeOptions.value.map(platform => ({
      platformType: platform.value,
      homeUrl: '',
      selected: false
    }));
    
    // 默认选中第一个平台（抖音）
    if (registerForm.socialMediaList.length > 0) {
      registerForm.socialMediaList[0].selected = true;
    }
  } catch (error) {
    console.error('获取数据字典失败:', error);
    // 如果获取失败，使用默认数据
    platformTypeOptions.value = [
      { value: '1', label: '抖音' },
      { value: '2', label: '小红书' },
      { value: '3', label: '快手' },
      { value: '4', label: 'B站' }
    ];
    
    registerForm.socialMediaList = platformTypeOptions.value.map(platform => ({
      platformType: platform.value,
      homeUrl: '',
      selected: platform.value === '1' // 默认选中抖音
    }));
  }
};

// 获取平台名称
const getPlatformName = (platformType: string) => {
  const platform = platformTypeOptions.value.find(item => item.value === platformType);
  return platform?.label || '未知平台';
};

// 添加验证码相关状态
const isSendingCode = ref(false);
const countdown = ref(0);
let countdownTimer: number | null = null;

// 添加验证码发送处理函数
const handleSendVerifyCode = async () => {
  if (!registerForm.email) {
    ElMessage.warning('请先输入邮箱地址');
    return;
  }
  
  // 验证邮箱格式
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(registerForm.email)) {
    ElMessage.warning('请输入正确的邮箱地址');
    return;
  }
  
  try {
    isSendingCode.value = true;
    // TODO: 调用发送验证码的API
     await sendVerifyCodeApi(registerForm.email);
    
    // 开始倒计时
    countdown.value = 60;
    countdownTimer = window.setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(countdownTimer!);
        countdownTimer = null;
      }
    }, 1000);
    
    ElMessage.success('验证码已发送，请查收邮件');
  } catch (error: any) {
    ElMessage.error(error.message || '发送验证码失败');
  } finally {
    isSendingCode.value = false;
  }
};

// 在组件卸载时清除定时器
onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
});

const loginRules = {
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: 'email' as const, message: "请输入正确的邮箱地址", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
};

const registerRules = {
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: 'email' as const, message: "请输入正确的邮箱地址", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, message: "请确认密码", trigger: "blur" },
    {
      validator: (rule: any, value: string, callback: Function) => {
        if (value !== registerForm.password) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  mobile: [
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur"
    }
  ],
  verifyCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 6, max: 6, message: '验证码长度应为6位', trigger: 'blur' }
  ],
  // 社交媒体URL验证规则
  'socialMediaList.homeUrl': [
    {
      validator: (rule: any, value: string, callback: Function) => {
        if (registerForm.socialMediaList.some(item => item.selected && !value)) {
          callback(new Error("请输入社交媒体主页地址"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
};

const isDark = computed(() => settingsStore.theme === "dark");

const refresh = () => {
  sliderVerifyRef.value?.refresh();
};

const verifySuccessCallback = ref<((captcha: any) => void) | null>(null);

const onSuccess = (captcha: any) => {
  if (verifySuccessCallback.value) {
    verifySuccessCallback.value(captcha);
    verifySuccessCallback.value = null;
  } else {
    // 默认处理登录验证码
    loginForm.nonceStr = captcha.nonceStr;
    loginForm.value = captcha.value;
    login();
  }
  showSliderVerify.value = false;
};

const login = () => {
  loading.value = true;
  userStore
    .login(loginForm)
    .then(() => {
      sliderVerifyRef?.value?.verifySuccessEvent();
      router.push("/");
      ElMessage.success("登录成功");
    })
    .catch(() => {
      refresh();
    })
    .finally(() => {
      loading.value = false;
    });
};

/* 滑动验证失败*/
const onFail = (msg: string) => {
  refresh();
};
/* 滑动验证异常*/
const onAgain = () => {
  ElMessage.error("滑动操作异常，请重试");
};

const toggleTheme = () => {
  const newTheme = isDark.value ? "light" : "dark";
  settingsStore.saveSettings({ theme: newTheme });
};

const handleLogin = async () => {
  if (!loginFormRef.value) return;
  
  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      const { data } = await getCaptchaSwitchApi();
      if (!data || data.configValue === "Y") {
        showSliderVerify.value = true;
        // 设置验证成功后的回调为默认的登录处理
        verifySuccessCallback.value = null;
      } else {
        login();
      }
    }
  });
};

const handleSocialLogin = (type: string) => {
  ElMessage.success(type + "登录测试");
};

const refreshQrCode = async () => {
  qrCodeExpired.value = false;
  // TODO: 调用后端接口获取新的二维码
};

let qrCodeTimer: number;
watch(loginType, (newVal) => {
  if (newVal === "qrcode") {
    refreshQrCode();
    qrCodeTimer = window.setInterval(() => {
      // TODO: 检查二维码状态
    }, 3000);
  } else {
    clearInterval(qrCodeTimer);
  }
});

// 添加 logo 颜色计算
const logoColor = computed(() => {
  return isDark.value ? "#4ecdc4" : "#ff6b6b";
});

const handleRegister = async () => {
  if (!registerFormRef.value) return;
  
  await registerFormRef.value.validate(async (valid) => {
    if (valid) {
      // 检查是否需要验证码
      const { data } = await getCaptchaSwitchApi();
      if (!data || data.configValue === "Y") {
        showSliderVerify.value = true;
        // 设置验证成功后的回调
        verifySuccessCallback.value = async (captcha) => {
          registerForm.captchaCode = captcha.value;
          registerForm.captchaKey = captcha.nonceStr;
          await doRegister();
        };
      } else {
        await doRegister();
      }
    }
  });
};

// 实际的注册操作
const doRegister = async () => {
  registerLoading.value = true;
  try {
    // 处理社交媒体数据
    const socialMediaData = registerForm.socialMediaList
      .filter(item => item.selected)
      .reduce((acc, item) => {
        acc[item.platformType] = item.homeUrl;
        return acc as Record<string, string>;
      }, {} as Record<string, string>);

    const registerData: RegisterParams = {
      username: registerForm.email, // 使用邮箱作为用户名
      password: registerForm.password,
      confirmPassword: registerForm.confirmPassword,
      nickname: registerForm.nickname,
      mobile: registerForm.mobile,
      email: registerForm.email, // email 字段也需要传递
      verifyCode: registerForm.verifyCode, // 添加 verifyCode 字段  
      captchaCode: String(registerForm.captchaCode || registerForm.verifyCode), // 确保是字符串类型
      captchaKey: registerForm.captchaKey,
      invitedBy: registerForm.invitedBy,
      socialMedia: socialMediaData
    };
    console.log('Sending registration data:', registerData);

    await registerApi(registerData);
    
    ElMessage.success("注册成功，请使用您的账号密码登录");
    
    // 注册成功后切换到登录表单，并预填邮箱和密码
    loginType.value = "login";
    loginForm.email = registerForm.email;
    loginForm.password = registerForm.password;
    
    // 清空注册表单
    registerForm.email = "";
    registerForm.password = "";
    registerForm.confirmPassword = "";
    registerForm.nickname = "";
    registerForm.mobile = "";
    registerForm.verifyCode = "";
    registerForm.captchaCode = "";
    registerForm.captchaKey = "";
    registerForm.invitedBy = "";
    // 重置社交媒体选择
    registerForm.socialMediaList.forEach(item => {
      item.selected = false;
      item.homeUrl = "";
    });
    // 重新初始化社交媒体列表（恢复默认选中状态）
    if (registerForm.socialMediaList.length > 0) {
      registerForm.socialMediaList[0].selected = true;
    }
  } catch (error: any) {
    ElMessage.error(error.message || "注册失败");
  } finally {
    registerLoading.value = false;
  }
};

const handleSocialMediaChange = (item: { platformType: string; homeUrl: string; selected: boolean }) => {
  // 检查至少选择一个社交媒体平台
  const hasSelected = registerForm.socialMediaList.some(platform => platform.selected);
  if (!hasSelected && !item.selected) {
    ElMessage.warning('请至少选择一个社交媒体平台');
    item.selected = true;
    return;
  }
  
  // 清空URL当取消选择时
  if (!item.selected) {
    item.homeUrl = '';
  }
};

// 组件初始化
onMounted(() => {
  getDictData();
});

// 在组件卸载时清除定时器
onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
  clearInterval(qrCodeTimer);
});
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  min-height: 100vh;
  background: var(--el-bg-color);
}

/* 左侧背景区域样式 */
.login-background {
  flex: 1;
  position: relative;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  overflow: hidden;

  .background-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    /* 添加动态背景效果 */
    &::before {
      content: "";
      position: absolute;
      inset: -50%;
      background-image: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(33, 150, 243, 0.1) 3px,
          rgba(33, 150, 243, 0.1) 3px
        ),
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 2px,
          rgba(33, 150, 243, 0.1) 3px,
          rgba(33, 150, 243, 0.1) 3px
        );
      background-size: 30px 30px;
      transform: perspective(500px) rotateX(60deg);
      animation: matrixMove 20s linear infinite;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(
          circle at 30% 30%,
          rgba(33, 150, 243, 0.3) 0%,
          transparent 50%
        ),
        radial-gradient(
          circle at 70% 70%,
          rgba(3, 169, 244, 0.3) 0%,
          transparent 50%
        );
      filter: blur(30px);
      animation: glowPulse 8s ease-in-out infinite alternate;
    }
  }

  /* 品牌内容样式优化 */
  .brand-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 40px;

    .logo-wrapper {
      margin-bottom: 30px;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        inset: -30px;
        border: 2px solid rgba(33, 150, 243, 0.3);
        border-radius: 50%;
        animation: rotateBorder 10s linear infinite;
      }

      &::after {
        content: "";
        position: absolute;
        inset: -15px;
        background: radial-gradient(
          circle,
          rgba(33, 150, 243, 0.4),
          transparent 70%
        );
        filter: blur(15px);
        animation: glowPulse 4s ease-in-out infinite;
      }
    }

    .brand-title {
      font-size: 36px;
      font-weight: bold;
      color: #1565c0;
      margin-bottom: 16px;
      text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
    }

    .brand-description {
      font-size: 16px;
      color: #1976d2;
      max-width: 400px;
      margin: 0 auto;
      line-height: 1.6;
    }
  }
}

/* 移除之前的动画相关样式 */
.animated-background,
.gradient-circle,
.geometric-shapes {
  display: none;
}

/* 右侧登录表单区域样式 */
.login-form {
  width: 500px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--el-bg-color);
  position: relative;
  box-shadow: -10px 0 20px rgba(0, 0, 0, 0.05);

  .form-wrapper {
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
  }

  /* 登录方式切换 */
  .login-tabs {
    display: flex;
    margin-bottom: 30px;
    background: var(--el-fill-color-light);
    padding: 5px;
    border-radius: 12px;
    position: relative;

    .tab-item {
      flex: 1;
      padding: 12px;
      text-align: center;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--el-text-color-secondary);

      &.active {
        background: var(--el-bg-color);
        color: var(--el-color-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .el-icon {
        font-size: 18px;
      }
    }
  }

  /* 表单项样式 */
  :deep(.el-form-item) {
    margin-bottom: 24px;

    .el-input__wrapper {
      padding: 0 15px;
      height: 44px;
      border-radius: 8px;
      background: var(--el-fill-color-light);
      border: 2px solid transparent;
      transition: all 0.3s;

      &:hover,
      &.is-focus {
        border-color: var(--el-color-primary);
        background: var(--el-bg-color);
      }

      .el-input__inner {
        font-size: 14px;
      }
    }
  }

  /* 登录按钮 */
  .login-button {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    border: none;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
    }
  }

  /* 二维码登录样式 */
  .qrcode-box {
    text-align: center;
    padding: 30px 0;

    .qrcode-wrapper {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      padding: 15px;
      background: white;
      border-radius: 12px;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      .qrcode-scanner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--el-color-primary);
        animation: scan 2s linear infinite;
      }

      .qrcode-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .qrcode-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        border-radius: 12px;
      }
    }

    .qrcode-tip {
      margin-top: 20px;
      color: var(--el-text-color-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
  }

  /* 社交登录样式 */
  .social-login {
    margin-top: 40px;

    .divider {
      display: flex;
      align-items: center;
      color: var(--el-text-color-secondary);
      font-size: 14px;
      margin-bottom: 20px;

      &::before,
      &::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--el-border-color);
        margin: 0 16px;
      }
    }

    .social-icons {
      display: flex;
      justify-content: center;
      gap: 20px;

      .social-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        background: var(--el-fill-color-light);
        color: var(--el-text-color-regular);

        &:hover {
          transform: translateY(-2px);
          background: var(--el-color-primary-light-9);
          color: var(--el-color-primary);
        }
      }
    }
  }

  /* 页脚样式 */
  .footer {
    text-align: center;
    color: var(--el-text-color-secondary);
    font-size: 14px;

    a {
      color: inherit;
      text-decoration: none;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}

/* 动画相关 */
@keyframes scan {
  0% {
    top: 0;
  }
  50% {
    top: calc(100% - 2px);
  }
  100% {
    top: 0;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 主题切换按钮样式 */
.theme-switch {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;

  .theme-button {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: none;
    color: var(--el-text-color-primary);
    transition: all 0.3s;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-2px);
    }
  }
}

/* 登录选项样式 */
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;

  .el-checkbox {
    color: var(--el-text-color-regular);
  }

  .forget-password {
    color: var(--el-text-color-regular);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;

    &:hover {
      color: var(--el-color-primary);
    }
  }
}

/* 深色模式适配 */
.dark {
  .login-form {
    background: var(--el-bg-color-overlay);

    .login-tabs {
      background: rgba(255, 255, 255, 0.05);

      .tab-item.active {
        background: rgba(0, 0, 0, 0.3);
      }
    }

    :deep(.el-input__wrapper) {
      background: rgba(0, 0, 0, 0.2);

      &:hover,
      &.is-focus {
        background: rgba(0, 0, 0, 0.3);
      }
    }

    .qrcode-wrapper {
      background: var(--el-bg-color);
    }

    .social-icon {
      background: rgba(255, 255, 255, 0.05);

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }

  .theme-switch {
    .theme-button {
      background: rgba(0, 0, 0, 0.2);

      &:hover {
        background: rgba(0, 0, 0, 0.3);
      }
    }
  }

  .logo-wrapper {
    :deep(svg path) {
      fill: #2196f3;
    }
  }
}

/* 更新动画 */
@keyframes matrixMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 30px;
  }
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes rotateBorder {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 社交媒体选择样式 */
.social-media-section {
  margin: 20px 0;
  padding: 20px;
  background: var(--el-fill-color-light);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

  h4 {
    margin-bottom: 20px;
    color: var(--el-text-color-primary);
    font-size: 16px;
    font-weight: 500;
  }

  .social-media-grid {
    display: grid;
    gap: 16px;
  }

  .social-media-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--el-bg-color);
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .platform-label {
      min-width: 60px;
      color: var(--el-text-color-regular);
      font-size: 14px;
    }

    .el-checkbox {
      margin-right: 0;
    }

    .el-input {
      flex: 1;
      
      :deep(.el-input__wrapper) {
        background: var(--el-fill-color-light);
        box-shadow: none;
        border: 1px solid var(--el-border-color-light);
        
        &:hover, &.is-focus {
          border-color: var(--el-color-primary);
        }
      }
    }
  }
}

/* 深色模式适配 */
.dark {
  .social-media-section {
    background: rgba(255, 255, 255, 0.05);

    .social-media-item {
      background: rgba(0, 0, 0, 0.2);

      .el-input {
        :deep(.el-input__wrapper) {
          background: rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
}

.verify-code-container {
  display: flex;
  gap: 10px;
  align-items: center;
  
  .el-input {
    flex: 1;
  }
  
  .el-button {
    width: 120px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>

